<script setup lang="ts">
import { useProjectUpdateRecord } from "@fl/api/elevator-api";
import { cloneDeep } from "lodash-es";
const flagDict = {
  1: "具备加装电梯条件小区",
  2: "未纳入清册小区",
  3: "范围外小区",
};
const props = defineProps<{ detail: any }>();
const visible = defineModel<boolean>("visible", { required: true });
const detail = computed(() => props.detail);
// const id = computed(() => detail.value?.id);
const id = defineModel<string>("id", { required: true, default: '' });
const updateRecord = ref<any>([])
const { data } = useProjectUpdateRecord(id);
watchEffect(() => {
  if (data.value) {
    updateRecord.value = cloneDeep(data.value)
  }
})
watchEffect(() => {
  if (!visible.value) {
    updateRecord.value = []
    id.value = ''
  }
})
</script>
<template>
   <!-- @closed="closed" -->
  <el-drawer v-model="visible" :size="400">
    <template #header>
      <div class="bg-[#F2F3F5] text-[20px] font-semibold">详情</div>
    </template>
    <template #default>
      <dt class="font-semibold leading-32">详情信息：</dt>
      <ul class="mt-10 leading-24">
        <li>所在区：{{ detail.areaName }}</li>
        <li>街道：{{ detail.streetName }}</li>
        <li>社区：{{ detail.communityName }}</li>
        <li>小区：{{ detail.projectName }}</li>
        <li>小区别名：{{ detail.simpleName }}</li>
        <li>小区编号：{{ detail.projectCode }}</li>
        <li>核实结果：{{ detail.auditResult == 1 ? '是' :detail.auditResult == 2? '否':'-' }}</li>
        <li>小区标识：{{ flagDict[detail.flag] }}</li>
        <li>备注：{{ detail.remark }}</li>
        <li v-if="detail?.auditResult == 2">不通过原因：{{ detail.reason }}</li>
        <li>
          <ElImage
            :src="detail.addressInfo"
            class="w-full h-full"
            :preview-src-list="detail.addressInfo"
            :initial-index="0"
          />
        </li>
      </ul>
      <div v-if="updateRecord?.length > 0" class="mt-20">
        <dt class="font-semibold leading-32">修订记录：</dt>
        <div class="mt10" v-for="(item, index) in updateRecord" :key="index">
          <div>第{{ updateRecord.length - index }}次</div>
          <div v-for="(item2, index2) in item.changeList" :key="index2">
            <dd class="leading-24">
              {{ item2.label }}：{{ item2.oldValue || '无' }} -> {{ item2.newValue }}
            </dd>
          </div>
          
        </div>
      </div>
    </template>
  </el-drawer>
</template>
